<template>
  <div>
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">我的成绩</a></el-breadcrumb-item>
    </el-breadcrumb>
    <div style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;">
      <div class="searchBox">
        <el-input placeholder="搜索考试" prefix-icon="el-icon-search" v-model="bankName" clearable class="inputBox"></el-input>
        <el-button type="primary" @click="search">搜索</el-button>
      </div>
    </div>
    <div class="content">
      <el-table :data="examList" stripe style="width: 90%;  margin: 0 auto;">
        <el-table-column prop="name" label="考试名称"></el-table-column>
        <el-table-column prop="date" label="考试时间"></el-table-column>
        <el-table-column prop="score" label="考试成绩"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="turntoScore" type="text" size="small">查看分析</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

<!--    <div v-if="showSearch===0" class="searchResults">-->
<!--      <div style="width: 10%; padding: 15px;">-->
<!--        <el-button type="primary" @click="backToTabs">返回</el-button>-->
<!--      </div>-->
<!--      <div style="width: 80%;">-->
<!--        1-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
import NavMenu from '../../../components/NavMenu'
import Footer from '../../../components/Footer'
import { findBankByName } from '../../../api/questionBank.js'

export default {
  name: 'index',
  components: { Footer, NavMenu },
  data () {
    return {
      house: sessionStorage.getItem('house'),
      examList: [{
        index: 1,
        date: '2022-04-03',
        name: '2019级软件工程期末考试',
        score: 95
      }, {
        index: 2,
        date: '2022-04-23',
        name: '2019级计算机网络期末考试',
        score: 85
      }, {
        index: 3,
        date: '2022-04-18',
        name: '2019级操作系统期末考试',
        score: 87
      }, {
        index: 4,
        date: '2022-04-25',
        name: '2019级编译原理期末考试',
        score: 92
      }],
      bankName: '',
      banks: [],
      searchBanks: [],
      subject: '',
      showSearch: 1
    }
  },
  mounted () {
  },
  methods: {
    search () {
      findBankByName(0, 10, this.bankName).then(res => {
        if (res.data.errorCode === 0) {
          var temp = res.data.data.list
          var rtemp = []
          this.showSearch = 0
          for (var item of temp) {
            if (this.allSubjects.indexOf(item.subject)) {
              rtemp.push(item)
            }
          }
          this.searchBanks = rtemp
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    backToTabs () {
      this.showSearch = 1
      this.bankName = ''
    },
    turntoScore () {
      this.$router.push('/student/score')
    }
  }
}
</script>

<style scoped>
  /* eslint-disable */
  .content {
    padding: 15px;
    height: calc(100% - 60px);
    width: 90%;
    /* background-color: #42B983; */
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0 auto;
  }
  .breadcrumb {
    padding: 20px;
  }
  .searchBox {
    display: flex;
    margin: 10px 50px;
  }
  .inputBox {
    width: 300px;
    margin-right: 20px;
  }
  .searchResults {
    display: flex;
    width: 90%;
    margin: 0 auto;
  }
</style>
